<template>
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :router="true">
      <!-- 导航 -->
      <el-submenu :index="'/' + item1.id + ''" v-for="item1 in menuList" :key="item1.id">
        <template slot="title">
          <span slot="title">{{ item1.menu_name }}</span>
        </template>

        <el-menu-item :index="'/' + item2.path" v-for="item2 in item1.m_list" :key="item2.id">
          <span slot="title">{{ item2.menu_name }}</span>
        </el-menu-item>

      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
  export default {
    name: "Navigation",
    data() {
      return {
        menuList: [
            {
            "id": 100,
             "menu_name": "第一级菜单第一个选项",
            "path": "home", // path 指定 路由的路径
             "m_list": [{ // 二级菜单列表
                "id": 1000,
                "menu_name": "主页",
                "path": "home",
                "m_list": []
          },{
            "id": 1001,
            "menu_name": "学生信息管理",
            "path": "home/students",
            "m_list": []
          }]
        }, ]
      }
    }
  }
</script>

<style>

</style>
